<template>
  <div class="education">
    <div class="cho">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="按区域筛选">
          <el-select
            size="small"
            @change="areaselected(formInline.area)"
            v-model="formInline.area"
            placeholder="按区域筛选"
          >
            <el-option
              v-for="(item,index) in areacho"
              :key="item+index"
              :value="item.area"
            >{{item.area}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="按项目筛选">
          <el-select
            size="small"
            @change="departmentselected(formInline.project)"
            v-model="formInline.project"
            placeholder="按项目筛选"
          >
            <el-option v-for="(item,index) in selection" :key="item+index" :value="item">{{item}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="date">
          <el-date-picker
            type="month"
            value-format="yyyy-MM"
            @change="getSTime"
            placeholder="选择月份"
            v-model="formInline.date"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="choose">筛选</el-button>
          <el-button type="primary" size="small" @click="chooseall">全部</el-button>
          <el-button type="success" size="small" @click="handleadd">新增</el-button>
          <el-button type="warning" size="small" @click="exportExcel">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="train_level" label="项目" header-align="center" align="center"></el-table-column>
      <el-table-column prop="train_name" label="课程名称" header-align="center" align="center"></el-table-column>
      <el-table-column prop="lead_department" label="主导部门" header-align="center" align="center"></el-table-column>
      <el-table-column prop="join_department" label="参与部门" header-align="center" align="center"></el-table-column>
      <el-table-column prop="train_type" label="培训类别" header-align="center" align="center"></el-table-column>
      <el-table-column prop="join_plan_count" label="计划参与人数" header-align="center" align="center"></el-table-column>
      <el-table-column prop="real_join_count" label="实际参与人数" header-align="center" align="center"></el-table-column>
      <el-table-column prop="train_way" label="培训形式" header-align="center" align="center"></el-table-column>
      <el-table-column prop="train_date" label="培训时间" header-align="center" align="center"></el-table-column>
      <el-table-column prop="train_hour" label="培训时数" header-align="center" align="center"></el-table-column>
      <el-table-column prop="train_place" label="培训地点" header-align="center" align="center"></el-table-column>
      <el-table-column prop="train_money" label="培训费用" header-align="center" align="center"></el-table-column>
      <el-table-column prop="inspection_situation" label="考核情况" header-align="center" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100" header-align="center" align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="medium">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="培训情况编辑" :visible.sync="dialogVisible">
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="区域" prop="area">
          <el-select v-model="ruleForm.area" placeholder="请选择活动区域">
            <el-option
              v-for="(item,index) in areacho"
              :key="item+index"
              :label="item.area"
              :value="item.area"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目" prop="project">
          <el-input v-model="ruleForm.project"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-input v-model="ruleForm.department"></el-input>
        </el-form-item>
        <el-form-item label="培训级别" prop="train_level">
          <el-input v-model="ruleForm.train_level"></el-input>
        </el-form-item>
        <el-form-item label="课堂名称" prop="train_name">
          <el-input v-model="ruleForm.train_name"></el-input>
        </el-form-item>
        <el-form-item label="主导部门" prop="lead_department">
          <el-input v-model="ruleForm.lead_department"></el-input>
        </el-form-item>
        <el-form-item label="参与部门" prop="join_department">
          <el-input v-model="ruleForm.join_department"></el-input>
        </el-form-item>
        <el-form-item label="培训类别" prop="train_type">
          <el-input v-model="ruleForm.train_type"></el-input>
        </el-form-item>
        <el-form-item label="计划参与人数" prop="join_plan_count">
          <el-input v-model="ruleForm.join_plan_count"></el-input>
        </el-form-item>
        <el-form-item label="实际参与人数" prop="real_join_count">
          <el-input v-model="ruleForm.real_join_count"></el-input>
        </el-form-item>
        <el-form-item label="培训方式" prop="train_way">
          <el-input v-model="ruleForm.train_way"></el-input>
        </el-form-item>
        <el-form-item label="培训时间" prop="train_date">
          <el-input v-model="ruleForm.train_date"></el-input>
        </el-form-item>
        <el-form-item label="培训时数" prop="train_hour">
          <el-input v-model="ruleForm.train_hour"></el-input>
        </el-form-item>
        <el-form-item label="培训地点" prop="train_place">
          <el-input v-model="ruleForm.train_place"></el-input>
        </el-form-item>
        <el-form-item label="培训费用" prop="train_money">
          <el-input v-model="ruleForm.train_money"></el-input>
        </el-form-item>
        <el-form-item label="考核情况" prop="inspection_situation">
          <el-input v-model="ruleForm.inspection_situation"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeForm(ruleForm)">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm1" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
        <el-form-item label="区域" prop="area">
          <el-select v-model="ruleForm1.area" placeholder="请选择活动区域">
            <el-option
              v-for="(item,index) in areacho"
              :key="item+index"
              :label="item.area"
              :value="item.area"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目" prop="project">
          <el-input v-model="ruleForm1.project"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-input v-model="ruleForm1.department"></el-input>
        </el-form-item>
        <el-form-item label="培训级别" prop="train_level">
          <el-input v-model="ruleForm1.train_level"></el-input>
        </el-form-item>
        <el-form-item label="课堂名称" prop="train_name">
          <el-input v-model="ruleForm1.train_name"></el-input>
        </el-form-item>
        <el-form-item label="主导部门" prop="lead_department">
          <el-input v-model="ruleForm1.lead_department"></el-input>
        </el-form-item>
        <el-form-item label="参与部门" prop="join_department">
          <el-input v-model="ruleForm1.join_department"></el-input>
        </el-form-item>
        <el-form-item label="培训类别" prop="train_type">
          <el-input v-model="ruleForm1.train_type"></el-input>
        </el-form-item>
        <el-form-item label="计划参与人数" prop="join_plan_count">
          <el-input v-model="ruleForm1.join_plan_count"></el-input>
        </el-form-item>
        <el-form-item label="实际参与人数" prop="real_join_count">
          <el-input v-model="ruleForm1.real_join_count"></el-input>
        </el-form-item>
        <el-form-item label="培训方式" prop="train_way">
          <el-input v-model="ruleForm1.train_way"></el-input>
        </el-form-item>
        <el-form-item label="培训时间" >
          <el-col :span="11">
            <el-form-item prop="train_date">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                @change="getSTime"
                placeholder="选择日期"
                v-model="ruleForm1.train_date"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="培训时数" prop="train_hour">
          <el-input v-model="ruleForm1.train_hour"></el-input>
        </el-form-item>
        <el-form-item label="培训地点" prop="train_place">
          <el-input v-model="ruleForm1.train_place"></el-input>
        </el-form-item>
        <el-form-item label="培训费用" prop="train_money">
          <el-input v-model="ruleForm1.train_money"></el-input>
        </el-form-item>
        <el-form-item label="考核情况" prop="inspection_situation">
          <el-input v-model="ruleForm1.inspection_situation"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit(ruleForm1)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from "../../../utils/axios.tool";
import axios from 'axios'
import Qs from 'qs'
export default {
  data() {
    return {
      formInline: {
        area: "",
        project: "",
        date: ""
      },
      areacho: [],
      activeName: "first",
      tableData: [
        {
          id: "",
          area: "",
          project: "",
          department: "",
          train_level: "",
          train_name: "",
          lead_department: "",
          join_department: "",
          train_type: "",
          join_plan_count: "",
          real_join_count: "",
          train_way: "",
          train_date: "",
          train_hour: "",
          train_place: "",
          train_money: "",
          inspection_situation: ""
        }
      ],
      dialogVisible:false,
      dialogFormVisible:false,
      total: {
        join_plan_countall: 0,
        real_join_countall: 0,
        train_hourall: 0,
        train_moneyall: 0
      },
      ruleForm:{
            area:'',
            project:'',
            department:'',
            train_level:'',
            train_name:'',
            lead_department:'',
            join_department:'',
            train_type:'',
            join_plan_count:'',
            real_join_count:'',
            train_way:'',
            train_date:'',
            train_hour:'',
            train_place:'',
            train_money:'',
            inspection_situation:'',
        },
        ruleForm1:{
            area:'',
            project:'',
            department:'',
            train_level:'',
            train_name:'',
            lead_department:'',
            join_department:'',
            train_type:'',
            join_plan_count:'',
            real_join_count:'',
            train_way:'',
            train_date:'',
            train_hour:'',
            train_place:'',
            train_money:'',
            inspection_situation:'',
        },
        totaData:[{
          train_level: "合计",
          train_name: "",
          lead_department: "",
          join_department: "",
          train_type: "",
          join_plan_count: 0,
          real_join_count: 0,
          train_way: "",
          train_date: "",
          train_hour: 0,
          train_place: "",
          train_money: 0,
          inspection_situation: ""
        }]
    };
  },
  methods: {
    changeForm() {
        let id = this.usersid;
        let url = `/usermanage/trains/${id}/`
        Qs.stringify(this.ruleForm)
        let sessionId = localStorage.getItem("sessionId");
        let Authorization =  `JWT ${sessionId}`;
        axios.put(url,Qs.parse(this.ruleForm),{headers:{
            'Authorization':Authorization
            }
        }).then(res=>{
            this.dialogVisible = false;
            this.$message("修改成功");
            this.getData()
        })     
    },
    exportExcel() {　//兼容ie10哦！
    　　require.ensure([], () => {　　　　　　　　
        const { export_json_to_excel } = require('../../../vendor/Export2Excel');　　//引入文件　　　　　　
        const tHeader = ['项目', '课程名称', '主导部门', '参与部门', '培训类别', '计划参与人数', '实际参与人数', '培训形式', '培训时间', '培训时数', '培训地点', '培训费用', '考核情况']; //将对应的属性名转换成中文
        const filterVal = ['train_level', 'train_name', 'lead_department', 'join_department', 'train_type', 'join_plan_count', 'real_join_count', 'train_way', 'train_date', 'train_hour', 'train_place', 'train_money', 'inspection_situation'];//table表格中对应的属性名　　　　　 　　　
        const list = this.tableData;　　//想要导出的数据　　　　　　
        const data = this.formatJson(filterVal, list);　　　　　　　　
        export_json_to_excel(tHeader, data, '培训情况分析');
        })
    },
    formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
    },
    handleClick(row) {
        this.usersid = row.id
        this.ruleForm = row
        this.dialogVisible = true
    },
    handleadd(){
        this.dialogFormVisible = true
    },
    submit(forname){
        this.ruleForm1 = forname
        let url = "/usermanage/trains/";
        this.$axios.post(url, this.ruleForm1).then(res => {
            this.dialogFormVisible = false;
            this.$message("添加成功");
            this.getData();
        });
    },
    getSTime(val){
        this.formInline.date = val
    },
    areaselected(val) {
      this.formInline.area = val;
      this.formInline.project = '';
    },
    departmentselected(val) {
      this.formInline.project = val;
    },
    choose() {
      this.totaData=[{
          train_level: "合计",
          train_name: "",
          lead_department: "",
          join_department: "",
          train_type: "",
          join_plan_count: 0,
          real_join_count: 0,
          train_way: "",
          train_date: "",
          train_hour: 0,
          train_place: "",
          train_money: 0,
          inspection_situation: ""
        }]
      let url = "/usermanage/trains/";
      this.$axios.get(url, this.formInline).then(res => {
        this.tableData = res.results;
        this.tableData.map((item,index)=>{
            this.totaData[0].join_plan_count+=item.join_plan_count
            this.totaData[0].real_join_count+=item.real_join_count
            this.totaData[0].train_hour+=Number(item.train_hour)
            this.totaData[0].train_money+=item.train_money
            return this.totaData
        })
        this.tableData.push(this.totaData[0])
      });
    },
    areachoose() {
      let url = "/usermanage/area/";
      this.$axios.get(url).then(res => {
        this.areacho = res.data;
      });
    },
    chooseall(){
        this.formInline.area = ''
        this.formInline.project = ''
        this.formInline.date = ''
        this.getData()
    },
    getData(){
      this.totaData=[{
          train_level: "合计",
          train_name: "",
          lead_department: "",
          join_department: "",
          train_type: "",
          join_plan_count: 0,
          real_join_count: 0,
          train_way: "",
          train_date: "",
          train_hour: 0,
          train_place: "",
          train_money: 0,
          inspection_situation: ""
        }]
      let url = "/usermanage/trains/";
      this.$axios.get(url).then(res => {
        this.tableData = res.results;
        this.tableData.map((item,index)=>{
            this.totaData[0].join_plan_count+=item.join_plan_count
            this.totaData[0].real_join_count+=item.real_join_count
            this.totaData[0].train_hour+=Number(item.train_hour)
            this.totaData[0].train_money+=item.train_money
            return this.totaData
        })
        this.tableData.push(this.totaData[0])
      });
    }
  },
  mounted() {
    this.areachoose();
    this.getData();
  },
  computed: {
    selection: function() {
      for (var i = 0; i < this.areacho.length; i++) {
        if (this.areacho[i].area == this.formInline.area) {
          return this.areacho[i].project;
        }
      }
    }
  }
};
</script>

<style lang="less">
.education {
    .el-button--mini, .el-button--small{
        margin-right: 40px;
    }
    table{
        tr:last-of-type{
            td:last-of-type{
                button{
                    display: none;
                }
            }
        }
    }
}
</style>